<template>
  <div class="t-input__wrapper">
    <input spellcheck="false" class="t-input" ref="input" :class="[size ? 't-input--' + size : '', { 'is-disabled': disabled }]" :value="currentValue" :placeholder="placeHolder" :autocomplete="autoComplete" :type="type" @input="handleInput"></input>
  </div>
</template>

<script>
  export default {
    name: 'TInput',
    data() {
      return {
        store: {
          currentValue: '',
          lastValue: '',
          setCurrentValue(payload) {
            this.lastValue = this.currentValue;
            this.currentValue = payload;
          },
        },
      };
    },
    computed: {
      currentValue() {
        return this.store.currentValue;
      },
    },
    props: {
      value: [String, Number],
      size: String,
      placeHolder: String,
      name: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: 'text',
      },
      autoComplete: {
        type: String,
        default: 'off',
      },
      disabled: Boolean,
    },
    watch: {
      value(value) {
        this.store.setCurrentValue(value);
      },
    },
    methods: {
      handleInput(event) {
        this.store.setCurrentValue(event.target.value);
        this.$emit('input', this.store.currentValue);
      },
    },
  };
</script>